<template>
  <div class="dashboard-editor-container" :style="cssVars" v-resize="resize">
    <div class="top" style="width: 100%; position: relative"></div>
    <div class="big">
      <div class="left">
        <div class="l-one">
          <div class="s-title" @click="link('标准')">
            <img src="@/assets/index/组 49.png" class="t-img" alt="" />
            <div class="min-box">
              <div class="title-text">数据标准</div>
            </div>
          </div>
          <div class="one">
            <img src="@/assets/index/数据标准-图.png" alt="" class="one-left" />
            <div class="one-right">
              <div class="one-top">
                <img src="@/assets/index/实时数据.png" alt="" class="one-topimg" />
                <div class="one-topbox">
                  <div class="topbox-left">标准共</div>
                  <div class="topbox-right">
                    <div class="topbox-right-l">
                      {{ allModel }}
                    </div>
                    <div class="topbox-right-r">个</div>
                  </div>
                </div>
              </div>
              <div class="one-text2">
                <div class="text2">标准被引用次数</div>
                <div class="text2">764 次</div>
              </div>
              <div class="one-text2">
                <div class="text2">制定标准数据项</div>
                <div class="text2">{{ standard }} 项</div>
              </div>
            </div>
          </div>
        </div>
        <div class="l-one">
          <div class="s-title">
            <img src="@/assets/index/组 49.png" class="t-img" alt="" />
            <div class="min-box">
              <div class="title-text">数据表分析</div>
            </div>
          </div>
          <div class="two">
            <barEcharts :options="optionslist" />

            <div id="tangential"></div>
          </div>
        </div>
        <div class="l-one">
          <div class="s-title" @click="link('质量')">
            <img src="@/assets/index/组 49.png" class="t-img" alt="" />
            <div class="min-box">
              <div class="title-text">数据质检</div>
            </div>
          </div>
          <div class="two">
            <div class="radar-title">
              <img src="@/assets/index/数据质检.png" class="radar-img" alt="" />
              <div class="radar-box">
                <div class="compont" style="border-right: 1px solid #ffffff">
                  <div class="c-box">
                    <div class="num">5</div>
                    <div class="type">大类</div>
                  </div>
                </div>

                <div class="compont">
                  <div class="c-box">
                    <div class="num">{{ fiveValue }}</div>
                    <div class="type">条</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="radar-bigbox">
              <div id="radar"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="c-top">
          <div class="c-top-box">
            <img src="@/assets/index/实时数据-四边.png" alt="" />
            <div class="c-box-content">
              <div class="b-c-l">实时数据</div>
              <div class="b-c-c">
                <div class="b-c-c-ul">
                  <div class="b-c-c-li" v-for="(item, index) in realList">
                    <img src="@/assets/index/实时数据-条数框.png" alt="" />

                    <div class="c-li-box">
                      {{ item }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="b-c-r">条</div>
            </div>
          </div>
        </div>
        <div class="c-center">
          <div class="c-center-l">
            <div class="c-center-l-l">
              <div style="position: relative; margin-left: calc(var(--num) * 25px)">
                <img src="@/assets/index/矢量智能对象.png" alt="" style="width: calc(var(--num) * 43px); height: calc(var(--num) * 50px); margin-top: calc(var(--num) * 0px)" />
                <img src="@/assets/index/边框.png" alt="" style="position: absolute; left: calc(var(--num) * -20px); top: calc(var(--num) * -13px)" />
              </div>
            </div>
            <div class="c-center-l-r" style="margin-left: calc(var(--num) * 25px)">
              <div class="c-c-l-r-top">
                <div class="r-top-text">存储总量</div>
                <div class="r-top-text-img">
                  <img src="@/assets/index/箭头.png" alt="" />
                </div>
              </div>
              <div class="c-c-l-r-foot">
                <div class="r-foot-l">
                  <!-- {{ allStockpile }} -->
                  <countTo :startVal="0" ref="countTos" :endVal="allStockpile * 1" :duration="3000"></countTo>
                </div>
                <div class="r-foot-r r-top-text">GB</div>
              </div>
            </div>
          </div>
          <div class="c-center-r">
            <div class="c-center-r-li" v-for="item in stockpileList">
              <img src="@/assets/index/存储总量-底框.png" alt="" />
              <div class="c-center-r-li-box">
                <div class="r-li-box-top">
                  {{ item.name }}
                </div>
                <div class="r-li-box-foot">
                  <div class="r-foot-l">
                    <!--                     {{ item.value }}-->
                    <countTo :startVal="0" ref="countTos" :endVal="item.value * 1" :duration="3000"> </countTo>
                  </div>
                  <div class="r-foot-r r-top-text">GB</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-foot">
          <div class="c-f-l">
            <div class="c-f-l-top">
              <div class="c-center-l">
                <div class="c-center-l-l">
                  <div style="position: relative">
                    <img src="@/assets/index/文本.png" alt="" style="width: calc(var(--num) * 43px); height: calc(var(--num) * 50px); margin-top: calc(var(--num) * 0px)" />
                    <img src="@/assets/index/边框.png" alt="" style="position: absolute; left: calc(var(--num) * -23px); top: calc(var(--num) * -15px)" />
                  </div>
                </div>
                <div class="c-center-l-r" style="margin-left: calc(var(--num) * 25px)">
                  <div class="c-c-l-r-top">
                    <div class="r-top-text">记录总数（条）</div>
                    <div class="r-top-text-img">
                      <img src="@/assets/index/箭头.png" alt="" />
                    </div>
                  </div>
                  <div class="c-c-l-r-foot">
                    <div class="r-foot-l">
                      <!-- {{ allRecording }} -->
                      <countTo :startVal="0" ref="countTos" :endVal="203696760" :duration="3000"></countTo>
                    </div>
                    <div class="r-foot-r r-top-text">GB</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-f-l-foot">
              <div class="c-f-l-foot-box" v-for="item in recordingList">
                <img src="@/assets/index/记录总数-底框.png" alt="" />
                <div class="c-f-l-f-box">
                  <div class="c-f-l-f-box-l">
                    {{ item.name }}
                  </div>
                  <div class="c-f-l-f-box-r">
                    <div class="c-f-l-f-box-r-l">
                      <!-- {{ item.value }} -->
                      <countTo :startVal="0" ref="countTos" :endVal="item.value * 1" :duration="3000"></countTo>
                    </div>
                    <div class="c-f-l-f-box-r-r">条</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-f-r">
            <div class="c-f-r-imgbox">
              <img src="@/assets/index/数据治理-底部.png" class="bigimg" alt="" />
              <div class="position-box">
                <div :class="['p-box-li', 'p-box-li' + (index + 1)]" v-for="(item, index) in imgList" @mouseover="changeIndex(index)" @mouseout="changeIndexBack(index)" @click="link(item.url)">
                  <img :src="item.tp" alt="" v-show="!item.show" />
                  <img :src="item.tp1" alt="" class="hoverImg" v-show="item.show" />
                  <div :class="['box-li-text', item.show ? 'active' : '']">
                    {{ item.name }}
                  </div>
                </div>
                <!-- <div class="p-box-li p-box-li2">
                  <img src="@/assets/index/数据清洗-图标.png" alt="">
                  <div class="box-li-text">
                    数据清洗
                  </div>
                </div>
                <div class="p-box-li p-box-li3">
                  <img src="@/assets/index/数据汇聚-图标.png" alt="">
                  <div class="box-li-text">
                    数据汇聚
                  </div>
                </div>
                <div class="p-box-li p-box-li4">
                  <img src="@/assets/index/数据开发-图标.png" alt="">
                  <div class="box-li-text">
                    数据开发
                  </div>
                </div>
                <div class="p-box-li p-box-li5">
                  <img src="@/assets/index/数据治理-图标.png" alt="">
                  <div class="box-li-text">
                    数据治理
                  </div>
                </div> -->
                <div class="p-box-textbox">
                  <div class="p-box-text1">{{ showName }}</div>
                  <div class="p-box-text2">{{ showValue * 1 }} 条</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="l-one">
          <div class="s-title" @click="link('服务')">
            <img src="@/assets/index/组 49.png" class="t-img" alt="" />
            <div class="min-box">
              <div class="title-text">数据服务</div>
            </div>
          </div>
          <div class="two">
            <div class="radar-title">
              <img src="@/assets/index/数据质检.png" class="radar-img" alt="" />
              <div class="radar-box">
                <div class="compont">
                  <div class="c-box">
                    <div class="num allnum">服务总数</div>
                  </div>
                </div>
                <div class="compont">
                  <div class="c-box">
                    <div class="num">{{ serve.apiCount * 1 + 1 }}</div>
                    <div class="type">个</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-one-foot">
              <div class="right-one-foot-li">
                <img src="@/assets/index/数据服务-框.png" alt="" />
                <div class="r-f-li-box">
                  <div class="r-f-li-box-top">服务订阅人次</div>
                  <div class="r-f-li-box-foot">
                    <div class="num">{{ serve.userCount }}</div>
                    <div class="type">人次</div>
                  </div>
                </div>
              </div>
              <div class="right-one-foot-li">
                <img src="@/assets/index/数据服务-框.png" alt="" />
                <div class="r-f-li-box">
                  <div class="r-f-li-box-top">服务调用总次数</div>
                  <div class="r-f-li-box-foot">
                    <div class="num">{{ serve.callCount }}</div>
                    <div class="type">次</div>
                  </div>
                </div>
              </div>
              <div class="right-one-foot-li">
                <img src="@/assets/index/数据服务-框.png" alt="" />
                <div class="r-f-li-box">
                  <div class="r-f-li-box-top">今日访问总数</div>
                  <div class="r-f-li-box-foot">
                    <div class="num">{{ serve.dayCount }}</div>
                    <div class="type">次</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="l-one">
          <div class="s-title" @click="link('排行')">
            <img src="@/assets/index/组 49.png" class="t-img" alt="" />
            <div class="min-box">
              <div class="title-text">服务调用排行</div>
            </div>
          </div>
          <div class="paihang">
            <!--            <div id="3Decharts"></div>-->
            <div class="paihang-box" style="background-color: #97e4dc; height: calc(var(--num) * 18px)">
              <div class="pai-boximg">
                <div class="pai-boximg-l">
                  <div class="pai-boximg-l-l">序号</div>
                  <div class="pai-boximg-l-r">服务名称</div>
                </div>
                <div class="pai-boximg-r">调用次数</div>
              </div>
            </div>
            <div class="paihang-box" v-for="(item, index) in paihang" v-if="index < 4" style="height: 35px">
              <div class="pai-boximg pai-boximg2">
                <div class="pai-boximg-inofo">
                  <div class="pai-num">
                    <img :src="paihangList[index].url" alt="" />
                    <div class="pai-numimgbox">
                      {{ '0' + (index * 1 + 1) }}
                    </div>
                  </div>
                  <div class="pai-name" :title="item.api_name">
                    {{ item.api_name }}
                  </div>
                </div>
                <div class="pai-boximg-du">
                  <div class="pai-boximg-du-l">
                    <el-progress
                      :text-inside="true"
                      :color="paihangList[index].color"
                      :show-text="false"
                      :percentage="item.percentage * 100 > 100 ? 100 : item.percentage * 100"
                      :stroke-width="8"
                      status="exception"
                    >
                    </el-progress>
                  </div>
                  <div class="pai-boximg-du-r">{{ item.callCount }}次</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="l-one m-l-one">
          <div class="s-title">
            <img src="@/assets/index/组 49.png" class="t-img" alt="" />
            <div class="min-box">
              <div class="title-text">服务监控</div>
            </div>
          </div>
          <div class="two-echarts">
            <div id="elliptical"></div>

            <div id="cirque"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="line1"></div>
    <div class="foot">
      <div class="foot-left">
        <div style="position: relative">
          <img src="@/assets/index/right.png" alt="" style="position: absolute; left: 0; width: calc(var(--num) * 12.7px); height: 100%" />
          <img src="@/assets/index/业务应用系统-底部01.png" alt="" class="foot-bgimg" />
          <img src="@/assets/index/left.png" alt="" style="position: absolute; right: 0; width: calc(var(--num) * 12.7px); height: 100%" />
        </div>
        <div class="foot-left-box">
          <img src="@/assets/index/业务应用系统-图标01.png" alt="" />

          <div class="foot-l-b-center">业务应用系统</div>
          <div class="foot-l-b-right">
            <div class="num">{{ bottomList.length }}</div>
            <div class="type">个</div>
          </div>
        </div>
      </div>
      <div class="foot-center">
        <img src="@/assets/index/箭头.png" alt="" />
      </div>
      <div class="foot-right">
        <div class="foot-right-li" v-for="item in bottomList">
          <div style="position: relative">
            <img src="@/assets/index/right.png" alt="" style="position: absolute; left: 0; width: calc(var(--num) * 12.7px); height: 100%" />
            <img src="@/assets/index/业务应用系统-底部02.png" class="foot-right-liimg" alt="" />
            <img src="@/assets/index/left.png" alt="" style="position: absolute; right: 0; width: calc(var(--num) * 12.7px); height: 100%" />
          </div>

          <div class="foot-right-libox">
            <img src="@/assets/index/业务应用系统-图标02.png" alt="" />
            <div>
              <div class="libox-title" :title="item.callerRealName">
                {{ item.callerRealName }}
              </div>
              <div class="libox-count">调用次数 {{ item.callCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barEcharts from '@/components/barEchartsview/index.vue'
import { pageResize } from '@/assets/js/resetScreenSize.js'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import Cookies from 'js-cookie'

import { getSpecificationCount, apiCallSort, count, userCallSort, getByType } from '@/api/index/index'
import countTo from 'vue-count-to' //终端输入npm install vue-count-to --legacy-peer-deps
export default {
  name: 'DashboardAdmin',
  components: {
    barEcharts,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard,
    countTo,
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''

        function isReize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }

        // el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind(el) {
        // clearInterval(el.__vueSetInterval__)
      },
    },
  },

  data() {
    return {
      optionslist: [
        {
          name: '全量数据区',
          value: 357,
          color: '#51d7e5',
          colorV2: '#FFFFFF',
        },
        {
          name: '核心数据区',
          value: 193,
          color: '#f8ad1d',
          colorV2: '#FFFFFF',
        },
        {
          name: '主题数据区',
          value: 23,
          color: '#dd1f48',
          colorV2: '#FFFFFF',
        },
      ],
      num: '',
      color: 'red',
      allModel: 2,
      standard: 1,
      realList: [3, 4, 2, 9, 5, 9, 2, 9],
      allStockpile: 17.0,
      imgList: [
        {
          tp: require('@/assets/index/数据质检-图标.png'),
          tp1: require('@/assets/index/数据质检-圆形.png'),
          name: '数据质检',
          value: 1512112,
          show: false,
          url: '质量',
        },
        {
          tp: require('@/assets/index/数据清洗-图标.png'),
          tp1: require('@/assets/index/数据清洗-圆形.png'),
          name: '数据清洗',
          value: 154358,
          show: false,
          url: '',
        },
        {
          tp: require('@/assets/index/数据汇聚-图标.png'),
          tp1: require('@/assets/index/数据汇聚-圆行.png'),
          name: '数据汇聚',
          value: 486512,
          show: false,
          url: '集成',
        },
        {
          tp: require('@/assets/index/数据开发-图标.png'),
          tp1: require('@/assets/index/数据开发-圆形.png'),
          name: '数据开发',
          value: 751524,
          show: false,
          url: '',
        },
        {
          tp: require('@/assets/index/数据治理-方形.png'),
          tp1: require('@/assets/index/数据治理-图标.png'),
          name: '数据治理',
          value: 8124531,
          show: false,
          url: '处理',
        },
      ],
      showValue: '8124531',
      showName: '数据治理',
      stockpileList: [
        {
          name: '全量数据区',
          value: 2.3,
        },
        {
          name: '核心数据区',
          value: 11.0,
        },
        {
          name: '主题数据区',
          value: 1.2,
        },
        {
          name: '非结构化数据',
          value: 2.5,
        },
      ],
      allRecording: '203,696,760',
      recordingList: [
        {
          name: '全量数据区',
          value: 82535243,
        },
        {
          name: '核心数据区',
          value: 105619007,
        },
        {
          name: '主题数据区',
          value: 8051255,
        },
        {
          name: '非结构化数据',
          value: 7491255,
        },
      ],
      paihangList: [
        {
          url: require('@/assets/index/1.png'),
          value: '1230',
          color: '#62c400',
          name: '登录用户数',
          percentage: 70,
        },
        {
          url: require('@/assets/index/2.png'),
          value: '1228',
          color: '#3478ff',
          name: '项目实施进度情况',
          percentage: 68,
        },
        {
          url: require('@/assets/index/3.png'),
          value: '1202',
          color: '#3478ff',
          name: '按区域统计水库数量',
          percentage: 64,
        },
        {
          url: require('@/assets/index/4.png'),
          value: '1181',
          color: '#3478ff',
          name: '按类型统计水库数量',
          percentage: 50,
        },
      ],
      paihang: [],

      serve: {},
      time: {},
      timeKey: '',
      hour: '',
      minute: '',
      second: '',
      fiveValue: '',
      bottomList: [],
      timeclear: null,
      echartsModelFun: null,
      options: {},
    }
  },
  computed: {
    cssVars() {
      return {
        '--num': this.num,
      }
    },
  },
  watch: {
    options: function (newval, oldval) {
      if (this.echartsModelFun) {
        if (newval) {
          this.echartsModelFun.setOption(newval)
        } else {
          this.echartsModelFun.setOption(oldval)
        }
      } else {
        this.init()
      }
    },
  },

  beforeDestroy() {
    clearInterval(this.timeclear)
  },
  mounted() {
    if (Cookies.get('Admin-Token')) {
      this.getBaseInfo()
    }
    // this.timeclear = setInterval(() => {
    this.getBaseInfo()
    // }, 12000)
    this.num = document.querySelector('.dashboard-editor-container').offsetWidth / 1980
    document.querySelector('.two').style.height = this.num * 220 + 'px'
    document.querySelector('#radar').style.height = this.num * 200 + 'px'
    setTimeout(() => {
      // this.showCharts()
      this.createRadar()
      this.createElliptical()
      this.createCirque()
    })

    clearInterval(this.timeKey)
    this.timeKey = setInterval(() => {
      this.getTime()
    }, 1000)
  },

  methods: {
    // eslint-disable-next-line vue/no-dupe-keys
    link(name) {
      if (name == '标准') {
        this.$router.push('/standardsystem')
      } else if (name == '质量') {
        this.$router.push('/rules')
      } else if (name == '集成') {
        this.$router.push('/dataextraction')
      } else if (name == '处理') {
        this.$router.push('/datagovernance')
      } else if (name == '服务') {
        this.$router.push('/marketApi')
      }
    },
    changeIndex(e) {
      this.imgList[e].show = !this.imgList[e].show
      this.showName = this.imgList[e].name
      this.showValue = this.imgList[e].value * 1
    },
    changeIndexBack(e) {
      this.imgList[e].show = !this.imgList[e].show
    },
    getTime() {
      let vWeek = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let now = new Date()
      this.hour = now.getHours() //得到小时数
      this.minute = now.getMinutes() //得到分钟数
      this.second = now.getSeconds() //得到秒数
      if (this.hour < 10) {
        this.hour = '0' + this.hour
      }
      if (this.minute < 10) {
        this.minute = '0' + this.minute
      }
      if (this.second < 10) {
        this.second = '0' + this.second
      }
      let month = now.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let date = now.getDate()
      if (date < 10) {
        date = '0' + date
      }
      let obj = {
        year: now.getFullYear(), //得到年份
        month: month, //得到月份
        date: date, //得到日期
        day: vWeek[now.getDay()], //得到周几
      }
      this.time = obj
    },
    getBaseInfo() {
      getSpecificationCount().then((res) => {
        if (res.data.code == 200) {
          this.allModel = res.data.data.govCount
          this.standard = res.data.data.modelCount
        }
      })
      apiCallSort().then((res) => {
        if (res.data.code == 200) {
          this.paihang = res.data.data
          this.percentage = 0
          let all = 0
          res.data.data.forEach((item) => {
            all += item.callCount * 1
          })
          res.data.data.forEach((item) => {
            item.percentage = item.callCount / all
          })
        }
      })
      count().then((res) => {
        if (res.data.code == 200) {
          this.serve = res.data.data
        }
      })
      userCallSort().then((res) => {
        if (res.data.code == 200) {
          this.bottomList = res.data.data
        }
      })
    },
    resize() {
      this.num = document.querySelector('.dashboard-editor-container').offsetWidth / 1980
      document.querySelector('.two').style.height = this.num * 220 + 'px'
      document.querySelector('#radar').style.height = this.num * 200 + 'px'
      setTimeout(() => {
        this.showCharts()
        this.createRadar()
        this.createElliptical()
        this.createCirque()
      })
    },
    handleSetLineChartData(type) {},
    // 数据表分析
    showCharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('tangential')) //也可以通过$refs.newCharts的方式去获取到dom实例。
      let num = document.querySelector('.dashboard-editor-container').offsetWidth / 1980
      let chartData = [
        {
          name: '全量数据区',
          value: 357,
          color: '#51d7e5',
          colorV2: '#FFFFFF',
        },
        {
          name: '核心数据区',
          value: 193,
          color: '#f8ad1d',
          colorV2: '#FFFFFF',
        },
        {
          name: '主题数据区',
          value: 23,
          color: '#dd1f48',
          colorV2: '#FFFFFF',
        },
      ]
      let sum = chartData.reduce((pre, cur) => pre + cur.value, 0)
      let pieSeries = []
      // 图表option整理
      chartData.forEach((v, i) => {
        pieSeries.push({
          name: chartData[i].name,
          type: 'pie',
          clockWise: true,
          hoverAnimation: false,
          radius: [65 - i * 10 + '%', 72 - i * 10 + '%'],
          center: ['25%', '50%'],
          label: {
            show: false,
          },
          itemStyle: {
            color: chartData[i].color,
          },
          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,

              itemStyle: {
                color: 'rgba(235, 239, 247, 0)',
              },
              tooltip: {
                show: false,
              },
            },
          ],
        })
      })
      let option
      option = {
        legend: [
          {
            top: 'middle',
            right: '50',
            itemHeight: 10,
            itemWidth: 10,
            orient: 'vertical',
            data: ['全量数据区', '核心数据区', '主题数据区'],
            formatter: function (name) {
              var data = option.series
              var target
              for (var i = 0; i < data.length; i++) {
                if (data[i].name == name) {
                  target = data[i].data[0].value
                }
              }
              return '{title|' + name + '}\n{value|' + target + '}' + ' {text| 张表}'
            },

            textStyle: {
              color: '#FFFFFF',
              fontFamily: 'SourceHanSansCN-Regular',
              rich: {
                title: {
                  fontSize: this.num * 14,
                  color: '#FFFFFF',
                  padding: [this.num * 36, 0, 0, 0],
                },
                value: {
                  fontSize: this.num * 14,
                  fontWeight: '600',
                  lineHeight: 25,
                },
                text: {
                  fontSize: this.num * 14,
                  textAlign: 'right',
                },
              },
            },
          },
        ],

        title: {
          text: sum,
          subtext: '总表数',
          top: '36%',
          textAlign: 'center',
          left: '22%',
          color: '#FFFFFF',
          textStyle: {
            fontWeight: '600',
            fontSize: this.num * 20,
            color: '#FFFFFF',
          },
          subtextStyle: {
            fontSize: this.num * 14,
            fontWeight: 'normal',
            align: 'center',
            color: '#FFFFFF',
          },
        },
        series: pieSeries,
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    //
    createRadar() {
      getByType().then((res) => {
        if (res.data.code == 200) {
          let nameArr = [{ name: '完整性' }, { name: '唯一性' }, { name: '一致性' }, { name: '自定义规则' }, { name: '有效性' }]
          let arr = []
          this.dictList('rule_classify').forEach((item) => {
            res.data.data.forEach((it) => {
              if (item.value == it.ruleType) {
                let obj = {
                  name: item.label,
                  value: it.errCoun,
                }
                arr.push(obj)
              }
            })
          })
          arr.forEach((item) => {
            nameArr.forEach((it) => {
              if (item.name == it.name) {
                it.value = item.value
              }
            })
          })
          let valueArr = []
          nameArr.forEach((item) => {
            if (item.value) {
              valueArr.push(item.value)
            } else {
              valueArr.push(0)
            }
          })
          this.fiveValue = 0
          valueArr.forEach((item) => {
            this.fiveValue += item * 1
          })

          let myChart = this.$echarts.init(document.getElementById('radar')) //也可以通过$refs.newCharts的方式去获取到dom实例。
          let num = document.querySelector('.dashboard-editor-container').offsetWidth / 1980
          var LeiData = valueArr
          let option
          option = {
            tooltip: {
              textStyle: {
                color: '#0b60c0',
                fontSize: this.num * 6,
              },
            },
            radar: {
              nameGap: 5, // 图中工艺等字距离图的距离
              splitNumber: 1, //指示器轴的分割段数
              name: {
                textStyle: {
                  color: '#FFFFFF',
                  fontSize: this.num * 14,
                  fontWeight: 400,
                },
              },
              indicator: nameArr,
              axisLine: {
                //指向外圈文本的分隔线样式
                lineStyle: {
                  color: '#56FFC5',
                  type: 'dotted',
                },
                show: true,
              },
              splitLine: {
                lineStyle: {
                  color: '#56FFC5',
                  // width: 2,
                },
                show: true,
              },
              splitArea: {
                areaStyle: {
                  color: 'rgba(86, 255, 197, 0.1)',
                },
              },
            },
            grid: {
              top: '18%',
              left: '3%',
              right: '4%',
              bottom: '6%',
              containLabel: true,
            },
            series: [
              {
                name: ' ',
                type: 'radar',
                symbol: 'circle',
                symbolSize: 1 * this.num,
                data: [
                  {
                    value: LeiData,
                    name: '',
                    lineStyle: {
                      width: 2 * this.num,
                      color: '#56FFC5', // 雷达图的线条
                    },
                    areaStyle: {
                      color: 'rgba(86, 255, 197, 0.2)', // 雷达图的区块背景
                    },
                    itemStyle: {
                      normal: {
                        color: '#0b60c0', // 雷达图的圆点
                      },
                    },
                  },
                ],
              },
            ],
          }
          myChart.setOption(option)
          myChart.resize()
          window.addEventListener('resize', function () {
            myChart.resize()
          })
        }
      })
    },
    createElliptical() {
      count().then((res) => {
        if (res.data.code == 200) {
          let myChart = this.$echarts.init(document.getElementById('elliptical')) //也可以通过$refs.newCharts的方式去获取到dom实例。
          var scale = 1
          let echartData = [
            {
              value: res.data.data.useCount * 1 + 1,
              name: '正常',
              unit: '个',
            },
            {
              value: res.data.data.unUseCount,
              name: '异常',
              unit: '个',
            },
          ]
          var unit = echartData[0].unit || ''
          var legendData = echartData.map((v) => v.name)
          let option
          option = {
            legend: {
              data: legendData,
              orient: 'vertical',
              itemHeight: this.num * 10,
              itemWidth: this.num * 10,

              right: '20%',
              bottom: '0%',
              textStyle: {
                color: '#FFFFFF',
                fontSize: 12 * this.num,
                // padding:[-this.num * 5, 0, 0, 0],
                rich: {
                  title: {
                    fontSize: this.num * 12,
                    color: '#FFFFFF',
                    padding: [this.num * 5, 0, 0, 0],
                  },
                  value: {
                    fontSize: this.num * 12,
                    fontWeight: '600',
                    lineHeight: 25,
                    padding: [this.num * 4, 0, 0, 0],
                  },
                  text: {
                    fontSize: this.num * 12,
                    textAlign: 'right',
                    padding: [this.num * 5, 0, 0, 0],
                  },
                },
              },
              formatter: function (name) {
                let target = ''
                for (var i = 0; i < echartData.length; i++) {
                  if (echartData[i].name == name) {
                    target = echartData[i].value
                  }
                }
                return '{title|' + name + '}   {value|' + target + '}' + ' {text| 个}'
              },
            },
            series: [
              {
                name: '',
                type: 'pie',
                radius: [, '50%'],
                center: ['50%', '35%'],
                hoverAnimation: false,
                color: ['#3AD3F7', '#f53758'],
                label: {
                  normal: {
                    formatter: function (params, ticket, callback) {
                      var total = 0 //考生总数量
                      var percent = 0 //考生占比
                      echartData.forEach(function (value, index, array) {
                        total += value.value
                      })
                      percent = ((params.value / total) * 100).toFixed(1)
                      return '{normal|' + params.name + ' ' + percent + '%}\n'
                    },
                    padding: [-50 * this.num, -50 * this.num],
                    rich: {
                      normal: {
                        fontSize: 12 * this.num,
                        color: '#FFFFFF',
                        align: 'right',
                      },
                      value: {
                        fontSize: 26 * this.num,
                      },
                    },
                  },
                },
                labelLine: {
                  length: 5 * this.num,
                  length2: 50 * this.num,
                },
                data: echartData,
              },
            ],
          }
          myChart.setOption(option)
          myChart.resize()
          window.addEventListener('resize', function () {
            myChart.resize()
          })
        }
      })
    },
    createCirque() {
      count().then((res) => {
        if (res.data.code == 200) {
          let allCount = res.data.data.apiCount * 1 + res.data.data.unUseCount * 1 + 1
          let myChart = this.$echarts.init(document.getElementById('cirque')) //也可以通过$refs.newCharts的方式去获取到dom实例。
          // 图形的大小是 220*200 其他的范围自行调整
          // 模糊点：  itemHeight。itemWidth,  itemGap  是设置icon 相关大小的
          const alarmColor = ['#Fbdd00', '#53ddfb', '#4bcc27']
          let option
          option = {
            color: alarmColor,
            title: [
              {
                text: '{val|' + allCount + '} 个\n{name| 服务总数 }',
                top: '25%',
                left: '43%',
                textAlign: 'center',
                textStyle: {
                  fontSize: 12,
                  color: '#ffffff',
                  fontWeight: 'normal',
                  rich: {
                    name: {
                      fontSize: 12 * this.num,
                      color: '#ffffff',
                      padding: [10 * this.num, 0, 0, 0],
                    },
                    val: {
                      fontSize: 15 * this.num,
                      fontWeight: 'bold',
                      color: '#ffffff',
                    },
                  },
                },
              },
            ],
            grid: {
              left: 10 * this.num,
              right: 10 * this.num,
              bottom: 20 * this.num,
              top: 0,
              containLabel: true,
            },
            legend: {
              show: true,
              left: 'center',
              top: 'bottom',
              orient: 'vertical',
              itemHeight: 10 * this.num,
              itemWidth: 10 * this.num,
              itemGap: 10 * this.num,
              icon: 'rect',
              textStyle: {
                color: '#ffffff',
                fontSize: 12 * this.num,
              },
            },
            series: [
              {
                symbolSize: 10,
                type: 'pie',
                radius: ['38%', '56%'],
                center: ['45%', '36%'],
                data: [
                  { name: '第三方服务  ' + res.data.data.unUseCount, value: res.data.data.unUseCount },
                  { name: '空间服务  1', value: 1 },
                  { name: 'API服务  ' + res.data.data.apiCount, value: res.data.data.apiCount },
                ],
                label: {
                  show: false,
                },
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    // borderColor: bgColor,
                    borderWidth: 1,
                  },
                },
              },
            ],
          }
          myChart.setOption(option)
          myChart.resize()
          window.addEventListener('resize', function () {
            myChart.resize()
          })
        }
      })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  height: 100%;
  background-color: #023644;

  .chart-wrapper {
    background: #fff;
    margin-bottom: 32px;
  }
}

.felx-around {
  display: flex;
  justify-content: space-between;
}

.felx {
  display: flex;
  align-items: center;
}

.big-title {
  height: calc(var(--num) * 118px);
  margin-bottom: calc(var(--num) * 20px);
}

.title {
  position: absolute;
  width: 100%;
  color: #0b60c0;
  text-align: center;
  bottom: 42%;
  left: 0;
  font-weight: 600;
  font-size: calc(var(--num) * 36px);
  font-family: SourceHanSansCN-Heavy;
}

.top-foot {
  // font-size: 1.619em;
  padding: 0 calc(var(--num) * 50px);
  box-sizing: border-box;
  color: #0b60c0;
  font-family: SourceHanSansCN-Medium;
}

.time {
  font-size: calc(var(--num) * 20px);
  margin-right: calc(var(--num) * 24px);
}

.f-right {
  width: calc(var(--num) * 90px);
  justify-content: space-between;
}

.userimg {
  width: calc(var(--num) * 17px);
  height: calc(var(--num) * 18px);
}

.user {
  font-size: calc(var(--num) * 20px);
}

.big {
  padding: 0 calc(var(--num) * 50px);
  box-sizing: border-box;
  width: 100%;
  display: flex;
  // justify-content: space-between;
}

.l-one {
}

.s-title {
  width: 100%;
  position: relative;
  cursor: pointer;
}

.t-img {
  width: 100%;
  height: calc(var(--num) * 37px);
}

.min-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--num) * 10px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.l-img {
  height: calc(var(--num) * 13px);
  width: calc(var(--num) * 4px);
  margin-right: calc(var(--num) * 12px);
}

.title-text {
  font-size: calc(var(--num) * 18px);
  color: #ffffff;
  font-weight: 600;
  margin-left: calc(var(--num) * 42px);
  height: 100%;
}

.r-img {
  width: calc(var(--num) * 287px);
  margin-left: calc(var(--num) * -20px);
  height: calc(var(--num) * 13px);
}

.one {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding: calc(var(--num) * 20px) calc(var(--num) * 32px);
  box-sizing: border-box;
}

.one-left {
  width: calc(var(--num) * 71px);
  height: calc(var(--num) * 97px);
  margin-left: calc(var(--num) * 20px);
}

.one-right {
  margin-left: calc(var(--num) * 46px);
  width: calc(var(--num) * 190px);
}

.one-top {
  position: relative;
  width: calc(var(--num) * 190px);
  height: calc(var(--num) * 50px);
}

.one-topimg {
  width: calc(var(--num) * 190px);
  height: calc(var(--num) * 50px);
}

.one-topbox {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--num) * 190px);
  height: calc(var(--num) * 50px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--num) * 20px);
  box-sizing: border-box;
}

.one-topbox div {
  width: 50%;
  text-align: center;
}

.topbox-left {
  font-size: calc(var(--num) * 18px);
  font-family: SourceHanSansCN-Bold;
  color: #78e9eb;
  font-weight: 600;
}

.one-topbox .topbox-right {
  display: flex;
  align-items: center;
  width: 30%;
}

.topbox-right-l {
  font-size: calc(var(--num) * 20px);
  font-family: SourceHanSansCN-Bold;
  color: #78e9eb;
  font-weight: 600;
}

.topbox-right-r {
  font-family: SourceHanSansCN-Regular;
  font-size: calc(var(--num) * 14px);
  margin-left: calc(var(--num) * 8px);
  color: #78e9eb;
}

.one-text2 {
  padding: 0 calc(var(--num) * 10px);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text2 {
  margin-top: calc(var(--num) * 14px);
  font-size: calc(var(--num) * 14px);
  color: #78e9eb;
  font-family: SourceHanSansCN-Bold;
}

.two {
  // padding: 0 calc(var(--num)*32px);
  // height: calc(var(--num)*220px);
  box-sizing: border-box;
}

#tangential {
  width: 100%;
  height: 100%;
}

.radar-title {
  width: calc(var(--num) * 387px);
  height: calc(var(--num) * 50px);
  margin: calc(var(--num) * 18px) auto;
  position: relative;
}

.radar-img {
  height: 100%;
  width: 100%;
}

.radar-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.compont {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-box {
  display: flex;
  align-items: center;
}

.num {
  font-size: calc(var(--num) * 20px);
  color: #ffffff;
  font-weight: 600;
  font-family: SourceHanSansCN-Bold;
}

.type {
  font-size: calc(var(--num) * 14px);
  color: #ffffff;
  font-family: SourceHanSansCN-Regular;
  margin-left: calc(var(--num) * 8px);
}

.radar-bigbox {
  width: 100%;
  height: calc(var(--num) * 190px);
}

#radar {
  width: 100%;
  height: 100% !important;
}

// 中间部分
.center {
  width: calc(var(--num) * 920px);
  height: calc(var(--num) * 790px);
  margin: 0 calc(var(--num) * 20px);
  margin-top: 32px;
}

.left,
.right {
  width: calc(var(--num) * 460px);
  height: calc(var(--num) * 790px);
  border-radius: calc(var(--num) * 5px);
  padding: calc(var(--num) * 20px);
  box-sizing: border-box;
  box-shadow: 0px 4px 16px calc(var(--num) * 250px) rgba(240, 241, 245, 0.2) inset;
  margin-top: 32px;
}

.c-top {
  width: 100%;
  height: calc(var(--num) * 189px);
  // background-color: #FFFFFF;
  // border-radius: calc(var(--num)*5px);
  // padding: calc(var(--num)*30px) calc(var(--num)*50px);
  box-sizing: border-box;
  border-radius: calc(var(--num) * 5px);
  padding: calc(var(--num) * 20px);
  box-sizing: border-box;
  box-shadow: 0px 4px 16px calc(var(--num) * 250px) rgba(240, 241, 245, 0.2) inset;
}

.c-top-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.c-top-box img {
  width: 100%;
  height: 100%;
}

.c-box-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: calc(var(--num) * 28px) calc(var(--num) * 20px);
  display: flex;
  justify-content: space-evenly;
  // justify-content: space-between;
  align-items: center;
}

.b-c-l,
.b-c-r {
  font-size: calc(var(--num) * 24px);
  color: #ffffff;
  font-weight: 500;
}

.b-c-c-ul {
  display: flex;
  justify-content: space-between;
  margin: 0 calc(var(--num) * 19px) 0 calc(var(--num) * 26px);
}

.b-c-c-li {
  position: relative;
  margin-right: calc(var(--num) * 9px);
}

.b-c-c-li img {
  width: calc(var(--num) * 65px);
  height: calc(var(--num) * 73px);
}

.c-li-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  line-height: calc(var(--num) * 73px);
  text-align: center;
  font-size: calc(var(--num) * 40px);
  font-weight: 600;
  color: #ffffff;
}

.c-center {
  height: calc(var(--num) * 136px);
  width: 100%;
  margin: calc(var(--num) * 20px) 0;
  // background-color: #FFFFFF;
  // border-radius: calc(var(--num)*5px);
  // padding: 0 calc(var(--num)*50px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-radius: calc(var(--num) * 5px);
  padding: calc(var(--num) * 20px);
  box-sizing: border-box;
  box-shadow: 0px 4px 16px calc(var(--num) * 250px) rgba(240, 241, 245, 0.2) inset;
}

.c-center-l {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.c-center-l-l img {
  width: calc(var(--num) * 80px);
  height: calc(var(--num) * 80px);
}

.c-center-l-r {
  height: 100%;
  // padding-top: calc(var(--num)*10px);
  // box-sizing: border-box;
  margin-left: calc(var(--num) * 10px);
}

.c-c-l-r-top {
  display: flex;
  align-items: center;
}

.r-top-text {
  font-size: calc(var(--num) * 16px);
  color: #ffffff;
}

.r-top-text-img {
  margin-left: calc(var(--num) * 8px);
}

.r-top-text-img img {
  width: calc(var(--num) * 13px);
  height: calc(var(--num) * 9px);
}

.c-c-l-r-foot {
  margin-top: calc(var(--num) * 10px);
  display: flex;
  align-items: baseline;
}

.r-foot-l {
  font-size: calc(var(--num) * 20px);
  color: #ffffff;
  font-weight: 600;
}

.r-foot-r {
  margin-left: calc(var(--num) * 10px);
}

.c-center-r {
  display: flex;
  align-items: center;
  margin-left: calc(var(--num) * 40px);
}

.c-center-r-li {
  position: relative;
  margin-left: calc(var(--num) * 20px);
}

.c-center-r-li img {
  width: calc(var(--num) * 119px);
  height: calc(var(--num) * 70px);
}

.c-center-r-li-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // padding-left: calc(var(--num)*12px);
  box-sizing: border-box;
}

.r-li-box-top {
  margin-top: calc(var(--num) * 15px);
  text-align: center;
  color: #ffffff;
  font-size: calc(var(--num) * 14px);
}

.r-li-box-foot {
  // margin-top: calc(var(--num)*10px);
  margin: calc(var(--num) * 5px) auto 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  text-align: center;
}

.c-foot {
  margin-top: calc(var(--num) * 20px);
  width: 100%;
  height: calc(var(--num) * 425px);
  display: flex;
  justify-content: space-between;
}

.c-f-l,
.c-f-r {
  width: calc(var(--num) * 450px);
  height: 100%;
  border-radius: calc(var(--num) * 5px);
  box-sizing: border-box;
  box-shadow: 0px 4px 16px calc(var(--num) * 250px) rgba(240, 241, 245, 0.2) inset;
}

.c-f-l-top {
  padding: calc(var(--num) * 25px) 0 calc(var(--num) * 18px) calc(var(--num) * 50px);
}

.c-f-l-foot {
  width: 100%;
  padding: 0 calc(var(--num) * 25px);
}

.c-f-l-foot-box {
  position: relative;
  margin-bottom: calc(var(--num) * 8px);
}

.c-f-l-foot-box img {
  width: calc(var(--num) * 401px);
  height: calc(var(--num) * 60px);
}

.c-f-l-f-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--num) * 20px);
  box-sizing: border-box;
}

.c-f-l-f-box-l {
  font-size: calc(var(--num) * 18px);
  color: #ffffff;
}

.c-f-l-f-box-r {
  display: flex;
  align-items: center;
}

.c-f-l-f-box-r-l {
  font-size: calc(var(--num) * 20px);
  color: #ffffff;
  font-weight: 600;
}

.c-f-l-f-box-r-r {
  margin-left: calc(var(--num) * 8px);
  font-size: calc(var(--num) * 18px);
  color: #ffffff;
}

.c-f-r {
  display: flex;
  justify-content: center;
}

.c-f-r-imgbox {
  cursor: pointer;
  width: calc(var(--num) * 330px);
  height: calc(var(--num) * 230px);
  margin: auto;
  position: relative;
}

.bigimg {
  width: calc(var(--num) * 330px);
  height: calc(var(--num) * 230px);
}

.position-box {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.p-box-li1 {
  position: absolute;
  top: calc(var(--num) * -30px);
  left: calc(var(--num) * 40px);
}

.p-box-li2 {
  position: absolute;
  top: calc(var(--num) * -30px);
  right: calc(var(--num) * 40px);
}

.p-box-li3 {
  position: absolute;
  top: calc(var(--num) * 70px);
  left: calc(var(--num) * -14px);
}

.p-box-li4 {
  position: absolute;
  top: calc(var(--num) * 70px);
  right: calc(var(--num) * -14px);
}

.p-box-li5 {
  position: absolute;
  bottom: calc(var(--num) * -28px);
  right: calc(var(--num) * 124px);
}

.p-box-li img {
  display: block;
  margin: auto;
  width: calc(var(--num) * 46px);
  height: calc(var(--num) * 59px);
}

.p-box-li .hoverImg {
  width: calc(var(--num) * 58px);
  height: calc(var(--num) * 59px);
}

.box-li-text {
  margin-top: calc(var(--num) * 5px);
  border: 1px solid #00bdbd;
  border-radius: 4px;
  color: #fff;
  border-radius: calc(var(--num) * 5px);
  font-size: calc(var(--num) * 14px);
  padding: calc(var(--num) * 8px) calc(var(--num) * 8px);
}

.active {
  border: 1px solid #00bdbd;
  border-radius: 4px;
  background: #00bdbd;
}

.p-box-textbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
}

.p-box-text1 {
  font-weight: 500;
  width: 100%;
  text-align: center;
  font-size: calc(var(--num) * 18px);
  color: #ffffff;
}

.p-box-text2 {
  width: 100%;
  text-align: center;
  font-size: calc(var(--num) * 20px);
  color: #ffffff;
  font-weight: 600;
  margin-top: calc(var(--num) * 8px);
}

.allnum {
  font-size: calc(var(--num) * 16px);
  font-weight: 600;
}

.right-one-foot {
  margin: calc(var(--num) * 24px) 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.right-one-foot-li {
  position: relative;
}

.right-one-foot-li img {
  width: calc(var(--num) * 138px);
  height: calc(var(--num) * 72px);
}

.r-f-li-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.r-f-li-box-top {
  // width: 100%;
  padding: calc(var(--num) * 16px) calc(var(--num) * 1px) 0 calc(var(--num) * 10px);
  box-sizing: border-box;
  text-align: center;
  font-size: calc(var(--num) * 18px);
  color: #fff;
  font-weight: 600;
  transform: scale(0.8);
  flex-wrap: nowrap;
}

.r-f-li-box-foot {
  margin-top: calc(var(--num) * 12px);
  display: flex;
  justify-content: center;
  align-items: baseline;
}

//页面底部
.line1 {
  width: 100%;
  height: calc(var(--num) * 20px);
}

.foot {
  margin: auto;
  overflow-x: scroll;
  width: calc(var(--num) * 1880px);
  padding: calc(var(--num) * 18px);
  box-sizing: border-box;
  display: flex;
  align-items: center;

  border-radius: calc(var(--num) * 5px);
  box-shadow: 0px 4px 16px 250px rgba(240, 241, 245, 0.2) inset;
}

.foot-left {
  position: relative;
  cursor: pointer;
}

.foot-bgimg {
  width: calc(var(--num) * 404px);
  height: calc(var(--num) * 104px);
}

.foot-left-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--num) * 50px);
  box-sizing: border-box;
}

.foot-left-box img {
  width: calc(var(--num) * 89px);
  height: calc(var(--num) * 66px);
}

.foot-l-b-center {
  font-size: calc(var(--num) * 16px);
  color: #ffffff;
  font-weight: 600;
}

.foot-l-b-right {
  display: flex;
  align-items: baseline;
}

.foot-center {
  margin-left: calc(var(--num) * 16px);
}

.foot-center img {
  width: calc(var(--num) * 16px);
  height: calc(var(--num) * 12px);
}

.foot-right {
  display: flex;
  align-items: center;

}

.foot-right-li {
  cursor: pointer;
  position: relative;
  margin-left: calc(var(--num) * 14px);
}

.foot-right-liimg {
  width: calc(var(--num) * 221px);
  height: calc(var(--num) * 104px);
}

.foot-right-libox {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--num) * 25px);
  box-sizing: border-box;
}

.foot-right-libox img {
  width: calc(var(--num) * 60px);
  height: calc(var(--num) * 54px);
}

.libox-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  font-size: calc(var(--num) * 16px);
  color: #ffffff;
  margin-bottom: calc(var(--num) * 8px);
  font-weight: 600;
}

.libox-count {
  padding: calc(var(--num) * 8px) calc(var(--num) * 10px);
  font-size: calc(var(--num) * 12px);
  color: #fff;
  background-color: #00bdbd;
  border-radius: calc(var(--num) * 20px);
}

.paihang-box {
  width: 100%;
  position: relative;
  margin-top: calc(var(--num) * 5px);
}

.paihang-box img {
  width: 100%;
  height: calc(var(--num) * 36px);
}

.pai-boximg {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(var(--num) * 14px);
  color: #ffffff;
  padding: 0 calc(var(--num) * 15px) 0 calc(var(--num) * 32px);
}

.pai-boximg-l {
  display: flex;
  align-items: center;
}

.pai-boximg-l-r {
  margin-left: calc(var(--num) * 80px);
}

.pai-boximg2 {
  padding: 0 calc(var(--num) * 5px) 0 calc(var(--num) * 10px);
}

.pai-boximg-inofo {
  display: flex;
  align-items: center;
  width: 50%;
}

.pai-num {
  height: calc(var(--num) * 30px);
  width: calc(var(--num) * 36px);
  line-height: calc(var(--num) * 30px);
  text-align: center;
  color: #fff;

  position: relative;
}

.pai-num img {
  height: calc(var(--num) * 30px);
  width: calc(var(--num) * 43px);
}

.pai-numimgbox {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  line-height: calc(var(--num) * 30px);
  padding-left: calc(var(--num) * 5px);
}

.pai-name {
  margin-left: calc(var(--num) * 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pai-boximg-du {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pai-boximg-du-l {
  width: 65%;
}

.pai-boximg-du-r {
  width: 30%;
}

.el-progress-bar__innerText {
  display: none !important;
}

.m-l-one {
  margin-top: calc(var(--num) * 8px);
}

.two-echarts {
  width: 100%;
  height: calc(var(--num) * 210px);
  display: flex;
}

.elliptical-box {
  width: 50%;
}

#elliptical {
  width: 55%;
  height: calc(var(--num) * 210px);
}

#cirque {
  width: 45%;
  height: calc(var(--num) * 210px);
}

.cirque-box {
  width: 50%;
}
</style>
